<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>代理对象</title>
	</head>
	<body>
		<div id="app">
			<a>
				<p></p>
				<div @click="test">按钮</div>
				<button @click="testArray">测试数组监听</button>
				<button @click="testObject">测试对象监听</button>
				<button @click="getObject">获取对象的值</button>
				<button @click="testIsShow">监听v-if</button>
				<div v-if="isshow" >
					haha：{{form.name}}
					<div>
						<a> 数值： {{ num }}:{{name}}</a>
							<a> 姓名： {{ form.obj.name }}</a>
							<a> 姓名1： {{ num }}</a>
						<a>{{form.name}}</a>
					</div>
				</div>
				<input v-model="form.name" >
				<input v-model="num" >
				<br>
				<br>
				<div v-for="value in myArray">
				  {{ name }} {{ value }}
				  <a>111</a>
				  <br>
				  <a>22222::</a> {{name}} :: {{num}} 表单名 :: {{form.name}}
				  <br>
				 
				  <br>
				</div>
				<hr>
				
				<div v-for="(value, key) in form">
					{{ key }} ---- {{ value }}
					<a></a>
				</div>
				<br>
				<hr>
				<div v-for="(value, key) in myArray">
					{{ key }} --myArray-- {{ value }}
				</div>
				
				<hr>
				<div v-for="(value, key, index) in myArray">
				 {{ index }} {{ key }} --myArray-- {{ value }} -- 
				</div>
				<hr>
				
				<div v-for="(value, key, index) in myArray2">
					<li>{{index}} 项目</li>
				  {{ value.name }} 
				  <br>
				  <a> {{ value.name }} </a>
				  <div>
					  <div>
						 这里是divname {{ value.name }}
					  </div>
				  </div>
				  {{ value.test.name }}  3333333333
				  <br>
				  
				</div>
				
				
			</a>
		</div>
		<script src="js/xiong_vue.js"></script>
		<script>
			var v={
				data(){
					return {
						 isshow:true,
						 name:'名字初始值',
						 num:11,
						 myArray : ['Item 1', 'Item 2', 'Item 3'],
						 myArray2 : [{name:'Item 1',test:{name:"1"}}, {name:'Item 2',test:{name:"2"}}, {name:'Item 3',test:{name:"3"}}],
						 form:{
							 name:'123',
							 obj:{
								 name:'哈哈',
								 isshow:false,
							 },
							 isshow:true
						 }
					}
				},
				created(){
					this.testName();
				},
				method:{
					testName(){
						console.log('初始化')
					},
					getName(){
						return 'haha';
					},
					test(){
						this.num++;
					},
					testIsShow(){
						if(this.isshow){
							this.isshow=false;
						}else{
							this.isshow=true;
						}
					},
					testArray(){
						this.myArray.push('Item4');
						let arr={name:'Item 1',test:{name:"1"}};
						this.myArray2.push(arr);
					},
					testObject(){
						//this.form['name']='456'
					},
					getObject(){
						app.setData('name','哈哈哈')
						let name=app.getData('form.name')
					//	console.log(name)
					}
				}
			}
			app.importData(v);
			app.init('app');
				
			app.setData('name','X.I.O')
			
		</script>
	
		<script>
			
			function getNestedValue(obj, key) {
			  var keys = key.split(".");
			  var value = obj;
			  for (var i = 0; i < keys.length; i++) {
			    if (value && typeof value === "object" && keys[i] in value) {
			      value = value[keys[i]];  // 更新当前值
			    } else {
			      return undefined;  // 如果属性不存在，则返回 undefined
			    }
			  }
			  return value;
			}
			
			
			var data = { form: { name: "123",obj:{name:'xiong'} },name:456 };
			var key = 'form.obj.name';
			
			var value = getNestedValue(data, key);
			var value2= getNestedValue(data,name);
			
			console.log(value); 
			console.log(value2); 
			
			
			
		// 	let arr={};
		
			
		// 	// 使用 Proxy 对象监听对象的变化
		// 	const obj = { value: 0 };
			
		// 	const handler = {
		// 	  set(target, prop, value, receiver) {
		// 	    // 执行自定义操作
		// 	    console.log('对象已发生变化：', target,value,prop);
			    
		// 	    // 还可以使用 Reflect 库使操作保持不变性
		// 	    return Reflect.set(target, prop, value, receiver);
		// 	  },
		// 	};
			
		// 	const proxy = new Proxy(obj, handler);
			
		// 	// 修改整个对象的属性
		// 	proxy.value = 10; // 输出：对象已发生变化： { value: 10 }
		// 	proxy['value']=8;
			
		// 	const condition = 'form.num == 0 && num1 == 2 || num3 === 4 || (num5 == 6 && num8 == 9)';
		
			
		// 	// 使用正则表达式提取键
		// 	const keys = condition.match(/[a-zA-Z_][a-zA-Z0-9_.]*/g);
		// 	console.log(keys);
			

		// 	const str = 'Hello, the values are {{ form.name }}, {{ user.age }}, and {{ info }}';
			
		// 	const regex = /{{\s*([^}]+)\s*}}/g;
		// 	const matches = str.match(regex);
			
		// 	if (matches) {
		// 	  const values = matches.map(match => match.match(/{{\s*([^}]+)\s*}}/)[1].trim());
		// 	  console.log(values); // 输出为 ["form.name", "user.age", "data.info"]
		// 	}
			
		// 	var directive = 'v-for="(value, name) in object"';
		// 	var regex2 = /v-for\s*=\s*"\(([^,]+),\s*([^)]+)\)\s*in\s*([^"]+)"/;
		// 	var matches2 = directive.match(regex2);
			
		// 	if (matches2) {
		// 	  var value = matches2[1].trim();
		// 	  var name = matches2[2].trim();
		// 	  var object = matches2[3].trim();
			
		// 	  console.log("Value:", value);
		// 	  console.log("Name:", name);
		// 	  console.log("Object:", object);
		// 	}
			
		// 	directive = 'v-for="value in object"';
		// 	var regex4 = /v-for\s*=\s*"([^"]+)\s+in\s+(.*)"/;
		// 	var matches4= directive.match(regex4);
			
		// 	if (matches4) {
		// 	  var value = matches4[1].trim();
		// 	  var object = matches4[2].trim();
			
		// 	  console.log("Value1:", value);
		// 	  console.log("Object1:", object);
		// 	}
			
		// 	var directive = 'v-for="(value, name, index) in object"';
		// 	var regex3 = /v-for\s*=\s*"\(([^,]+),\s*([^,]+),\s*([^)]+)\)\s*in\s*([^"]+)"/;
		// 	var matches3 = directive.match(regex3);
			
		// 	if (matches3) {
		// 	  var value = matches3[1].trim();
		// 	  var name = matches3[2].trim();
		// 	  var index = matches3[3].trim();
		// 	  var object = matches3[4].trim();
			
		// 	  console.log("Value2:", value);
		// 	  console.log("Name2:", name);
		// 	  console.log("Index2:", index);
		// 	  console.log("Object2:", object);
		// 	}
			
			
		// 	var PlaceholderUtil = {
		// 	  replacePlaceholders: function(str, data) {
		// 	    return str.replace(/{{\s*(\w+)\s*}}/g, function(match, p1) {
		// 	      return data[p1] || match;
		// 	    });
		// 	  }
		// 	};
			
		// 	// 示例使用
		// 	var str1 = "{{ name  }} {{   index }} {{ num }}";
		// 	var data = { name: '姓名', index: '123' };
			
		// 	var replacedStr = PlaceholderUtil.replacePlaceholders(str1, data);
		// 	console.log(replacedStr);
			
		// 	arr['form.num']=1234;
		// 	console.log(arr['form.num'])
			
		</script>
	</body>
</html>